<template>
  <div id="bankcardPage">

    <div class="flex_head">
      <div class="solid"></div>
      <div class="item_two">
        <h3>银行卡绑定</h3>
      </div>
    </div>
    <div class="main">

      <el-row>

        <el-col :span="10" style="padding: 20px">

          <el-form :label-position="labelPosition" label-width="110px" :model="bankInfo">
            <el-form-item label="银行名称">
              <el-input v-model="bankInfo.cardBank" placeholder="请输入银行名称" :readonly="readonly" type='text'></el-input>
            </el-form-item>
            <el-form-item label="银行卡号">
              <el-input v-model="bankInfo.cardNo" placeholder="请输入银行卡号" type='number' :maxlength='20'
                        onmousewheel="return false;" :readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item label="银行预留手机号">
              <el-input v-model="bankInfo.cardPhone" placeholder="请输入银行预留手机号" type='number' onmousewheel="return false;"
                        :readonly="readonly"     ></el-input>
            </el-form-item>
            <el-form-item label="持卡人姓名">
              <el-input v-model="bankInfo.cardPerson" placeholder="请输入持卡人姓名" type='text' :maxlength='28'
                        :readonly="readonly"      ></el-input>
            </el-form-item>
          </el-form>
          <div>
            <el-button size="small" type="primary" @click="changeCard" :disabled="disabled" v-text="text"></el-button>
            <el-button size="small" type="primary" @click="backChange" :disabled="disabled2">撤销</el-button>
            <!--@keyup.native="checkNum"-->
          </div>
        </el-col>
        <el-col :span="14" style="padding: 20px">
          <h3>银行卡绑定记录</h3>
          <el-table :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column type="index" width='50'>
            </el-table-column>
            <el-table-column prop="createTime" label="申请日期" >
            </el-table-column>
            <el-table-column prop="cardNo" label="银行卡号" >
            </el-table-column>
            <el-table-column prop="cardPerson" label="持卡人姓名" width='110'>
            </el-table-column>
            <el-table-column prop="status" label="状态" width='110'>
            </el-table-column>
          </el-table>
          <div class="block" style="text-align: right;padding-right: 40px;">

            <el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber"
                           :total="total" :page-size="pageSize" layout="total, prev, pager, next">
            </el-pagination>
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
  import dateformat from 'dateformat'
  export default {
    data () {
      return {
        bankInfo: {
          cardNo: '',
          cardPerson: '',
          cardPhone: '',
          cardBank: ''
        },
        loading: false,
        pageSize: 10,
        pageNumber: 1,
        total: 1,
        disabled: false,
        labelPosition: 'right',
        tableData: [],
        lastInfo:{},
        readonly:false,
        text:"安全绑定",
        disabled2:false

      }
    },
    created() {
      this.getBindBankList();
      this.getLastBank()
    },
    methods: {
      changeCard() {
        if (this.bankInfo.cardBank == '') {
          this.$message({
            type: 'info',
            message: '请输入银行名称'
          })
          return false;
        }
        if (this.bankInfo.cardNo == '') {
          this.$message({
            type: 'info',
            message: '请输入银行卡号'
          })
          return false;
        }
        if (this.bankInfo.cardPhone == '') {
          this.$message({
            type: 'info',
            message: '请输入银行预留手机号'
          })
          return false;
        }
        if (this.bankInfo.cardPerson == '') {
          this.$message({
            type: 'info',
            message: '请输入持卡人姓名'
          })
          return false;
        }

        localStorage.setItem("bankInfo", JSON.stringify(this.bankInfo))
        this.$api.savechangeCard(this.bankInfo).then(res => {
          if (res.code == '000000') {
            console.log(res.data);
            this.disabled = true;
            this.$message({
              type: "success",
              message: "管理员审核中，请耐心等等......"
            });
           this.readonly = true;
           this.text = '审核中...'
            this.getBindBankList();
          }
        })
      },
      backChange(){
      this.$api.backChange().then(res =>{
        if(res.code == '000000'){
          this.$message({
            type: "success",
            message: "撤销成功"
          });
          this.readonly = false;
          this.text = '安全绑定';
          this.disabled = false;
          this.getBindBankList();
          this.bankInfo.cardBank = ''
          this.bankInfo.cardNo = ''
          this.bankInfo.cardPerson = ''
          this.bankInfo.cardPhone = ''
        }
      })
      },
      getLastBank(){
          this.$api.getlastBank().then(res =>{
            if(res.code == '000000'){
              console.log(res.data);
              for(let i in this.bankInfo){
                for(let j in res.data){
                   if(i == j){
                     this.bankInfo[i] = res.data[j]
                   }
                }
              }

              if( res.data.status == 9){
                this.readonly = true;
                this.text = '已成功绑定';
                this.disabled = true;
                 this.disabled2 = false;
                 return
              }
              if( res.data.status == 10){
                this.readonly = false;
                this.text = '安全绑定';
                this.disabled = false;
              }
              if( res.data.status == 11){
                this.readonly = true;
                this.text = '审核中...';
                this.disabled = true;
              }
              if( res.data.status == 12){
                this.readonly = false;
                this.text = '安全绑定';
                this.disabled = false;
              }
            }
          })
      },
      getBindBankList() {
        this.loading = true;
        let params ={
          pageSize:this.pageSize,
          pageNumber:this.pageNumber
        }
        this.$api.getBankList(params).then(res => {
          if (res.code == '000000') {
            console.log(res.data);
            this.loading = false;
            this.tableData = res.data.list;
            this.total = res.data.totalRow;
            this.tableData.forEach(item =>{
              let date = new Date(item.createTime);
              item.createTime = dateformat(date,'yyyy-mm-dd HH:MM')

              switch (item.status){
                case 9:item.status = '已通过';break;
                case 10:item.status = '失败';break;
                case 11:item.status = '待审核';break;
                case 12:item.status = '已撤销';break;
                default: break;
              }

            })
            this.$message({
              type: 'success',
              message: '获取银行卡申请列表成功'
            })
          }
        })
      },
      handleChange(val) {
        this.pageNumber = val;
        this.getBindBankList()
      }
    }
  }
</script>

<style lang="less">
  #bankcardPage {
    th {
      text-align: center;
    }
    .icon-icon1 {
      font-size: 35px !important;
      margin-right: 35px;
      position: absolute;
      color: #008000;
      right: 100px;
      bottom: -8px;
    }
    .title {
      text-align: right;
      font-size: 12px;
      margin-bottom: 10px;
      position: relative;
    }
    .icon-icon1 {
      font-size: 25px;
    }

    .main {
      h3 {
        padding: 10px 30px;
      }
      .bankBox {

        .el-input {
          /*position: absolute;
                    height: 40px;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;*/
          margin: 10px 0;
          input {
            text-align: center;
            font-size: 15px;
          }
        }
        .el-button {
          position: absolute;
          right: 40px;
          bottom: 15px;
          color: black;
        }
      }
    }
  }
</style>
